<template>
	<div class="tagLinkWrap">
        <div class="tagLink">
            <el-tag 
                v-for="(item,index) in tagArray" 
                :key="item.path"
                :class="{'tagNow':typeof item.tagNow != 'undefined' && item.tagNow}"
                @click="tagClick(item)"
                @close="handleClose(item,index)"
                :closable="item.path != '/index'">
                {{item.sideBarName || item.detailName}}
                <a 
                    class="verMiddle tagRefreshClick" 
                    v-if="item.path != '/index' && item.tagNow" 
                    href="javascript:void(0);" 
                    @click.stop="refresh(item)">
                    <img class="tagRefresh" src="../assets/refresh.png" alt="" />
                </a>
            </el-tag>
        </div>
	</div>
</template>
<script type="text/javascript">
    import routeConfig  from "@/router/routerConfig.js";
	export default{
		data () {
			return {
				routeConfigArr:[],
                tagArray:[{
                    path: '/index',
                    name: 'index',
                    sideBarName:"首页",
                }],
			}
		},
        created(){
			this.routeConfigArr = routeConfig;
		},
		mounted (){
            this.getPageInfo()
        },
        watch:{
            $route(){
				this.getPageInfo()
			}
        },
		components : {
			
		},
		methods : {
            getNowItem(){
                let routePath = this.$route.path;
                let nowItem = this.$util.arr_findItem(this.$util.treeToArray(routeConfig),routePath);
                return nowItem
            },
			getPageInfo(){
                let nowItem = this.getNowItem();
                if(typeof nowItem.detailName != 'undefined'){
                    return
                }
                let routePath = this.$route.path;
                var isHasIn = false;
                if(this.tagArray.length != 0){
                    this.tagArray.forEach(item => {
                        item.tagNow = false;
                    });
                    //判断是否已存在
                    for(let j = 0;j < this.tagArray.length;j++){
                        let tagItem = this.tagArray[j];
                        if(tagItem.path == routePath){
                            tagItem.tagNow = true;
                            isHasIn = true;
                        }
                    }
                }
                if(!isHasIn){
                    //不存在，进行新添加
                    var useItem = {};
                    for(let i = 0 ;i < this.$util.treeToArray(this.routeConfigArr).length;i++){
                        useItem = this.$util.treeToArray(this.routeConfigArr)[i];
                        if(useItem.path == routePath){
                            useItem.tagNow = true;
                            this.tagArray.push(useItem);
                            break;
                        }
                    }
                    this.$mitt.emit("needRefresh",useItem);
                }
			},
            handleClose(item,index){
                console.log(index);
                var beforIndex = index;
                this.tagArray.splice(index,1);
                if(item.tagNow){
                    if(this.tagArray.length > 0){
                        if(beforIndex > (this.tagArray.length -1 )){
                            var pushItem = this.tagArray[this.tagArray.length -1 ];
                            this.$router.push({ name: pushItem.name })
                        }else{
                            var pushItem = this.tagArray[beforIndex];
                            this.$router.push({ name: pushItem.name })
                        }
                    }
                }
            },
            tagClick(item){
                this.$router.push({ name: item.name })
            },
            refresh(item){
                this.$mitt.emit("needRefresh",item);
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.tagLinkWrap{
        background:#F2F3F5;
        padding:8px 27px 8px 20px;
        .tagLink{
            white-space: nowrap;
            overflow:hidden;
            overflow-x:auto;
        }
        .tagLink::-webkit-scrollbar{
            display:none;
        }
        .el-tag{
            margin-right:6px;
            background:white;
            cursor:pointer;
            border:none;
            height:28px;
            line-height:30px;
            color: #4F5969;
        }
        .el-tag:hover{
            color:#303133;
        }
        .el-tag .el-icon{
            background:white;
            color: #4F5969;
        }
        .el-tag .el-icon:hover{
            background: #eee;
            color:#303133;
        }
        .el-tag:last-child{
            margin-right:0px;
        }
        .tagNow.el-tag{
            background:#409eff;
            color:white;
        }
        .tagRefreshClick{
            padding:0 4px;
        }
        .tagRefresh{
            width:15px;
            vertical-align:middle;
            margin-bottom: 2px;
        }
    }
</style>